<template>
  <div class="friend-item">
    <div class="left">
      <avatar :src="value.avatar"></avatar>
    </div>
    <div class="right">
      <span class="title" @click="handleClick">
        <LevelTag :level="value.level"></LevelTag
        ><span style="margin-left: 5px">{{ value.title }}</span>
      </span>
      <p class="remark">{{ value.remark }}</p>
      <el-button class="btn" type="primary" plain size="small" @click="add"
        >+ 好友</el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits } from "vue";
import Avatar from "@/components/Avatar.vue";
import LevelTag from "@/components/LevelTag/LevelTag.vue";

const FriendItem = {
  avatar: String,
  title: String,
  userId: String || Number,
  level: Number || String,
  remark: String,
};

const emit = defineEmits(["add"]);
const props = defineProps({
  value: {
    type: Object as () => typeof FriendItem,
    required: true,
    default: () => {},
  },
});

function handleClick(userId: any) {}

function add() {
  console.log("add");
  emit("add", props.value);
}
</script>

<style scoped lang="less">
.friend-item {
  width: 25%;
  display: flex;
  align-items: center;
  padding: 10px;
  overflow: hidden;
  // margin: 10px;
  .left {
    margin-right: 0.5rem;
  }
  .right {
    margin-left: 0.5rem;

    .title {
      cursor: pointer;
      &:hover {
        color: var(--app-main-color);
      }
    }
    .remark {
      color: #939597;
      text-overflow: ellipsis;
      width: 6rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      box-sizing: border-box;
      // width: 10rem;
    }

    .btn {
      &:hover {
        background: var(--app-main-color);
        color: #fff;
      }
    }
  }
}
</style>
